<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="新增支付宝素材"
      :ghost="false"
      @back="() => $router.go(-1)"
    ></a-page-header>

    <page-header-wrapper>
      <a-card :bordered="false">
        <a-form-model
          ref="alipayForm"
          :model="alipayForm"
          :rules="alipayRules"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 11 }"
        >
          <a-form-model-item label="小程序" prop="id">
            <a-select placeholder="请选择小程序" v-model="alipayForm.id">
              <a-select-option :value="item.id" v-for="item of idList" :key="item.id">
                {{ item.app_name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="素材名称" prop="material_name">
            <a-input v-model="alipayForm.material_name" placeholder="请填写素材名称" allowClear />
          </a-form-model-item>

          <a-form-model-item label="主标题" prop="mainTitle">
            <a-input v-model="alipayForm.mainTitle" placeholder="请填写主标题" allowClear />
          </a-form-model-item>

          <a-form-model-item label="副标题" prop="subTitle">
            <a-input v-model="alipayForm.subTitle" placeholder="请填写副标题" allowClear />
          </a-form-model-item>

          <a-form-model-item label="推荐标签" required>
            <div class="flexBox" v-for="(item, i) of alipayForm.sellingTagMulti" :key="i">
              <div class="inp">
                <a-input v-model="item.value" placeholder="请填写标签" allowClear />
              </div>

              <a-button
                class="btn"
                type="primary"
                @click="handle('add')"
                v-if="i === alipayForm.sellingTagMulti.length - 1 && alipayForm.sellingTagMulti.length < 3"
                >添加</a-button
              >
              <a-button
                class="btn"
                type="danger"
                @click="handle('remove', i)"
                v-if="alipayForm.sellingTagMulti.length > 1"
                >删除</a-button
              >
            </div>
          </a-form-model-item>

          <a-form-model-item label="行动点" prop="actionPoint">
            <a-input v-model="alipayForm.actionPoint" placeholder="请填写行动点" allowClear />
          </a-form-model-item>

          <a-form-model-item label="纵图" prop="verticalImageForService">
            <cyyUploadImg
              @uploadSuccess="e => choosePic(e, 'verticalImageForService')"
              @deleteImg="alipayForm.verticalImageForService = ''"
              :imgSrc="alipayForm.verticalImageForService"
              :showSize="false"
            >
            </cyyUploadImg>
            <div class="ts">尺寸686*916-支持格式：PNG、JPG、JPEG，大小不超过 2 M</div>
          </a-form-model-item>

          <a-form-model-item label="横图" prop="horizontalImageForService">
            <cyyUploadImg
              @uploadSuccess="e => choosePic(e, 'horizontalImageForService')"
              @deleteImg="alipayForm.horizontalImageForService = ''"
              :imgSrc="alipayForm.horizontalImageForService"
              :showSize="false"
            >
            </cyyUploadImg>
            <div class="ts">尺寸686*514-支持格式：PNG、JPG、JPEG，大小不超过 2 M</div>
          </a-form-model-item>

          <a-form-model-item label="方图" prop="squareImageForService">
            <cyyUploadImg
              @uploadSuccess="e => choosePic(e, 'squareImageForService')"
              @deleteImg="alipayForm.squareImageForService = ''"
              :imgSrc="alipayForm.squareImageForService"
              :showSize="false"
            >
            </cyyUploadImg>
            <div class="ts">尺寸686*686-支持格式：PNG、JPG、JPEG，大小不超过 2 M</div>
          </a-form-model-item>

          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button v-loading="btnLoading" type="primary" @click="onSubmit"> 提交 </a-button>
            <a-button style="margin-left: 10px" @click="$router.go(-1)"> 取消 </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </page-header-wrapper>
  </div>
</template>

<script>
import { createMarketingMaterial } from '@/api/marketing/alipayPromotion'
import { cyyUploadImg } from '@/components/CyyUi/index'
import { alipayList } from '@/api/setting/applet'

export default {
  components: {
    cyyUploadImg
  },

  data() {
    return {
      btnLoading: false,
      idList: [],
      alipayForm: {
        id: '',
        material_name: '',
        mainTitle: '',
        subTitle: '',
        sellingTagMulti: [
          {
            value: ''
          }
        ],
        actionPoint: '',
        verticalImageForService: '',
        horizontalImageForService: '',
        squareImageForService: ''
      },

      // pattern: new RegExp('[\\u4E00-\\u9FFF]+', 'g'),
      // { pattern: this.pattern, message: '仅支持中文汉字', trigger: 'blur' },
      // { min: 4, max: 10, message: '必须4-10个字', trigger: 'blur' }
      // 支付宝验证规则
      alipayRules: {
        id: [{ required: true, message: '请选择小程序', trigger: 'change' }],
        material_name: [{ required: true, message: '请填写素材名称', trigger: 'blur' }],
        mainTitle: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        subTitle: [{ required: true, message: '副标题不能为空', trigger: 'blur' }],
        actionPoint: [{ required: true, message: '行动点不能为空', trigger: 'blur' }],
        verticalImageForService: [{ required: true, message: '纵图不能为空', trigger: 'blur' }],
        horizontalImageForService: [{ required: true, message: '横图不能为空', trigger: 'blur' }],
        squareImageForService: [{ required: true, message: '方图不能为空', trigger: 'blur' }]
      }
    }
  },

  methods: {
    choosePic(e, item) {
      console.log('e,', e.data)
      console.log('item,', item)
      this.alipayForm[item] = e.data
    },

    handle(type, index) {
      switch (type) {
        case 'add':
          this.alipayForm.sellingTagMulti.push({
            value: ''
          })
          break

        case 'remove':
          this.alipayForm.sellingTagMulti.splice(index, 1)
          break
      }
    },

    // 点击提交
    onSubmit() {
      this.$refs.alipayForm.validate(async valid => {
        if (valid) {
          let alipayForm = JSON.parse(JSON.stringify(this.alipayForm))

          if (!alipayForm.sellingTagMulti.every(el => el.value)) {
            this.$message.error('标签不能为空~')
            return
          }

          alipayForm.sellingTagMulti = alipayForm.sellingTagMulti.map(el => el.value)

          let data = {
            material_name: alipayForm.material_name,
            id:alipayForm.id,
            material_fields: {
              ...alipayForm
            }
          }

          delete data.material_fields.material_name
          delete data.material_fields.id

          this.btnLoading = true
          const res = await createMarketingMaterial(data)
          this.btnLoading = false

          if (!res.code) {
            this.$message.success(res.msg)
            this.$router.back()
            return
          }

          this.$message.error(res.msg)
        } else {
          return false
        }
      })
    }
  },

  async mounted() {
    const hide = this.$message.loading('请稍等', 0)
    let res = await alipayList()
    if (!res.code && res.data.length) {
      this.idList = res.data
    }

    hide()
  }
}
</script>

<style lang="less" scoped>
.flexBox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  &:last-of-type {
    margin-bottom: 0;
  }

  .inp {
    flex: 1;
  }

  .btn {
    margin-left: 10px;
  }
}
</style>
